<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String context = request.getContextPath();
	pageContext.setAttribute("context_", context);
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!doctype html>
<html>
<head>
<title>Demo-gridster.js</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/gridster/jquery.gridster.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/gridster/demo.css">
</head>
<body>


	<div class="gridster">
		<ul>

		</ul>
	</div>
	
	<div style="margin-top: 10px;">
		<button class="js-seralize">Serialize</button>
	</div>
	
	<div style="margin-top: 10px;">
		<textarea id="log" rows="10" cols="100"></textarea>
	</div>
	
	<div style="margin-top: 10px;">
		<button class="add_widget">add_widget(id=12)</button>
	</div>
	
	<div style="margin-top: 10px;">
		<button class="remove_widget">remove_widget(id=12)</button>
	</div>

	<script type="text/javascript" src="${pageContext.request.contextPath}/gridster/jquery.js"></script>
	<script src="${pageContext.request.contextPath}/gridster/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var widgets = ${widgets};
		
		var widgetsAll = new Array(); //定义一维数组 
		for(var i=0; i<widgets.length; i++) {
			widgetsAll[i] = new Array(); //将每一个子元素又定义为数组 
			widgetsAll[i][0] = widgets[i].html;
			widgetsAll[i][1] = widgets[i].col;
			widgetsAll[i][2] = widgets[i].row;
			widgetsAll[i][3] = widgets[i].size_x;
			widgetsAll[i][4] = widgets[i].size_y;
		}
		
		var gridster;

		$(function() {

			gridster = $(".gridster > ul").gridster({
				widget_margins : [ 5, 5 ],
				widget_base_dimensions : [ 100, 100 ], 
				serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y, id: $w.attr("id") } }, 
				autogrow_cols: true,
				resize: {
					enabled: true
				}
			}).data('gridster');

			$.each(widgetsAll, function(i, widget) {
				gridster.add_widget.apply(gridster, widget)
			});
			
			
			$('.js-seralize').on('click', function() {
	            var s = gridster.serialize();
	            $('#log').val(JSON.stringify(s));
	        })
	        
	        $('.add_widget').on('click', function() {
	        	var test = $('.gridster li[id=12]');
	        	if(test.length > 0) {
	        		$('#log').val("id=12 already added");
	        	} else {
		        	var test = [ '<li id="12">content-12(1,1,1,4)</li>', 1, 1, 1, 4 ];
					gridster.add_widget.apply(gridster, test);
	        	}
	        })
	        
	        $('.remove_widget').on('click', function() {
	        	var test = $('.gridster li[id=12]');
	        	if(test.length > 0) {
	        		$('#log').val("id=12 already removed");
					gridster.remove_widget(test);
	        	} 
	        })

		});
	</script>
</body>
</html>
